import React, { useState,useEffect, useRef} from 'react'

import { BorderBox1,Charts } from '@jiaminghi/data-view-react'

import './TopContent.less'
import { useTranslation } from 'react-i18next'
const option ={
  color:['#00d792','#18abf3'],
  legend: {
    data: ['入库', '出库'],
    bottom:20,
    itemWidth:80,
    itenHeight:60,
    textStyle: {
      fill: '#fff',
      fontSize:40
    },
  },
  xAxis: {
    name: '倒数天数',
    data: ['一', '二', '三', '四', '五', '六', '七'],
    nameTextStyle:{fontSize:40, color:'#fff'},
    axisLine: {
      style: {
        stroke: '#999',
      },
    },
    axisLabel: {
      style: {
        fill: '#999',
        fontSize:40
      },
    },
    axisTick: {
      show: false,
    },
  },
  grid:{
    left:120,
    right:200,
    bottom:120
  },
  yAxis: {
    data: 'value',
    splitLine: {
      show: false,
    },
    name:'数量(个)',
    nameTextStyle:{fontSize:40, color:'#fff'},
    axisLine: {
      style: {
        stroke: '#999',
      },
    },
    axisLabel: {
      style: {
        fill: '#999',
        fontSize:40
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: '入库',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    },
    {
      name: '出库',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    }
  ]
}

export default () => {
  const { t } = useTranslation()
  useEffect(()=>{
    option.series=[
      {
        name: '入库',
        data: [2, 3, 6, 6, 7, 6, 2, 4, 8, 9,2, 3, 6, 6, 7, 6, 2, 4, 8, 9,2, 3, 6, 6, 7, 6, 2, 4, 8, 9],
        type: 'bar',
        stack: 'a',
      },
      {
        name: '出库',
        data: [5, 3, 6, 6, 7, 6, 2, 2, 3, 6,5, 3, 6, 6, 7, 6, 2, 2, 3, 6,2, 3, 6, 6, 7, 6, 2, 4, 8, 9],
        type: 'bar',
        stack: 'a'
      }
    ];
    option.xAxis.data=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
  },[])
  return (
    <div id="topContent-inboard">
      <BorderBox1>
        <div className="ranking-board-title">{t('近一个月出入库数据统计')}</div>
        <Charts option={option} />
      </BorderBox1>
    </div>
  )
}
